<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>

	<body>
		<canvas id="canva" style="border: 1px solid"></canvas>
		<script>
			angle = Math.PI / 180
			//获取canva对象
			var can = document.getElementById("canva")
			//获取绘图上下文环境对象
			var caT = can.getContext("2d")
			can.width = 640
			can.height = 360
			for(i = 5; i < can.height; i = i + 5) {
				caT.moveTo(0, i)
				if(i % 10 == 0) {
					caT.lineTo(10, i)
				} else {
					caT.lineTo(5, i)
				}
			}
			//绘制图形
			caT.moveTo(200, 100)
			caT.lineTo(300, 100)
			caT.lineTo(300, 50)
			caT.lineTo(200, 100)
			caT.stroke()
			caT.strokeStyle = "aqua"
			caT.strokeRect(50, 50, 80, 80)

			function pc(x, y, a) {
				caT.beginPath()
				caT.moveTo(x + a + a * Math.sin(18 * angle), y)
				caT.lineTo(x - a - a * Math.sin(18 * angle), y)
				caT.lineTo(x + a * Math.cos(36 * angle), y - a * Math.cos(36 * angle) / Math.tan(18 * angle) + a * Math.cos(18 * angle))
				caT.lineTo(x, y + a * Math.cos(18 * angle))
				caT.lineTo(x - a * Math.cos(36 * angle), y - a * Math.cos(36 * angle) / Math.tan(18 * angle) + a * Math.cos(18 * angle))
				caT.lineTo(x + a + a * Math.sin(18 * angle), y)
				caT.stroke()
				caT.closePath()
			}
			pc(200, 200, 50)
			caT.fillStyle = "rosybrown"
			caT.fill()

			caT.strokeStyle = "#1572b5";
			caT.lineWidth = 2;
			caT.beginPath();
			caT.moveTo(231, 250);
			caT.bezierCurveTo(232, 146, 455, 143, 455, 250);
			caT.moveTo(455, 250);
			caT.bezierCurveTo(455, 360, 232, 360, 231, 250);
			caT.stroke();
			caT.closePath();
		</script>
	</body>

</html>